<template>
  <div style="margin-left: 10px">
    <el-button type="primary" @click="dialogVisible = true">分享</el-button>
    <el-dialog title="收货地址" :visible.sync="dialogVisible">
      <el-input v-bind:value="shareUrl">
        <el-button slot="append" type="primary" @click="copyUrl">一键复制</el-button>
      </el-input>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ShareUrl",
  mounted() {
    // 获取白板id
    this.whiteboard_id = this.$route.params.id;
  },
  data() {
    return {
      basePath: 'http://localhost:8080/share?whiteboard_id=',
      whiteboard_id: '', // 白板id
      dialogVisible: false, // url对话框
    }
  },
  methods: {
    copyUrl() {
      // 将分享的url写入剪贴板
      navigator.clipboard.writeText(this.shareUrl).then(()=> {
        /* 成功 */
        this.$message({
          message: '复制成功',
          type: 'success'
        });
        this.dialogVisible = false; // 关闭对话框
      }, ()=> {
        /* 失败 */
        this.$message({
          type: 'error',
          message: '失败，请手动复制'
        });
      });
    }
  },
  computed: {
    shareUrl() {
      return this.basePath + this.whiteboard_id
    }
  }
}
</script>
